<template>
  <a-form id="Step2Form" class="user-layout-login" ref="Step2Form" :form="form">
    <a-popover
      placement="rightTop"
      :trigger="['focus']"
      :getPopupContainer="(trigger) => trigger.parentElement"
      v-model="state.passwordLevelChecked">
      <template slot="content">
        <div :style="{ width: '240px' }" >
          <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
          <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
          <div style="margin-top: 10px;">
            <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
          </div>
        </div>
      </template>
      <a-form-item>
        <a-input
          size="large"
          type="password"
          @click="handlePasswordInputClick"
          autocomplete="false"
          placeholder="至少6位密码，区分大小写"
          v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
        ></a-input>
      </a-form-item>
    </a-popover>

    <a-form-item>
      <a-input
        size="large"
        type="password"
        autocomplete="false"
        placeholder="确认密码"
        v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
      ></a-input>
    </a-form-item>
    <a-form-item style="text-align: center;">
      <a-button
        size="large"
        type="primary"
        htmlType="submit"
        class="login-button"
        style="text-align: center;"
        :loading="state.loginBtn"
        :disabled="state.loginBtn"
        @click="handleSubmit"
      >确定修改</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script>
import { mapActions } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'

const levelNames = {
  0: '低',
  1: '低',
  2: '中',
  3: '强'
}
const levelClass = {
  0: 'error',
  1: 'error',
  2: 'warning',
  3: 'success'
}
const levelColor = {
  0: '#ff0000',
  1: '#ff0000',
  2: '#ff7e05',
  3: '#52c41a'
}

export default {
  name: 'Step2Form',
  mixins: [mixinDevice],
  data () {
    return {
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false
      }
    }
  },
  computed: {
    passwordLevelClass () {
      return levelClass[this.state.passwordLevel]
    },
    passwordLevelName () {
      return levelNames[this.state.passwordLevel]
    },
    passwordLevelColor () {
      return levelColor[this.state.passwordLevel]
    }
  },
  methods: {
    ...mapActions(['Login', 'Logout']),
    handlePasswordLevel (rule, value, callback) {
      let level = 0

      // 判断这个字符串中有没有数字
      if (/[0-9]/.test(value)) {
        level++
      }
      // 判断字符串中有没有字母
      if (/[a-zA-Z]/.test(value)) {
        level++
      }
      // 判断字符串中有没有特殊符号
      if (/[^0-9a-zA-Z_]/.test(value)) {
        level++
      }
      this.state.passwordLevel = level
      this.state.percent = level * 30
      if (level >= 2) {
        if (level >= 3) {
          this.state.percent = 100
        }
        callback()
      } else {
        if (level === 0) {
          this.state.percent = 10
        }
        callback(new Error('密码强度不够'))
      }
    },
    handlePasswordCheck (rule, value, callback) {
      const password = this.form.getFieldValue('password')
      console.log('value', value)
      if (value === undefined) {
        callback(new Error('请输入密码'))
      }
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次密码不一致'))
      }
      callback()
    },
    handlePasswordInputClick () {
      if (!this.isMobile()) {
        this.state.passwordLevelChecked = true
        return
      }
      this.state.passwordLevelChecked = false
    },
    handleSubmit () {
      const { form: { validateFields }, state } = this
      validateFields({ force: true }, (err, values) => {
        if (!err) {
          state.passwordLevelChecked = false
          this.$emit('nextStep')
          // $router.push({ name: 'recoverResult', params: { ...values } })
        }
      })
    }
  }
}
</script>
